@import (reference) "../variable.less";
@import "../common.less";

@padding-lr-m: 15px;

html, body, #container {
  height: 100%;
}
.wea-edc-fv-wrapper {
  background: rgb(237, 240, 248);
  min-height: 100%;
  -webkit-overflow-scrolling:touch; 

  .wea-edc-pane-box {
    width: 100%;
  }
  
  & > div {
    width: 100%;
    min-height: 100%;
    padding: 20px 10px; 
    margin: 0 auto;
    position: relative;
  }
  
  &.wea-edc-fv-wrapper-mobilefull > div{
    padding: 0px;
  }
  &.mobile-device {
    font-size: 14px;
    min-height: auto;
    select, 
    textarea, 
    input[type='text'],
    input[type='tel'],
    input[type='email'],
    input[type='date'],
    input[type='time'],
    .wea-edc-form-number .ant-input,
    .ant-input-number {
      width: 100%;
      height: @mobile-fh;
      line-height: @mobile-fh;
    }

    .wea-edc-form-name,
    .wea-edc-form-email,
    .wea-edc-form-telephone,
    .wea-edc-form-mobile,
    .wea-edc-form-number{
      .ant-input{
        width: 100%;
      }
    }

    .wea-edc-form-item {
      padding: 10px @padding-lr-m;
      
      .wea-edc-com-title {
        font-size: 16px;
      }

      .wea-edc-com-desc {
        font-size: inherit;
      }
    }

    .wea-edc-errmsg {
      line-height: 1.2;
    }
  }

  .wea-edc-form-item {
    border: none;
  }

  .wea-edc-com-readonly{
    padding: 7px 5px;
    margin-left: 0;
  }
}

@media (min-width: 960px) {
  .wea-edc-fv-wrapper > div {
    width: 700px;
  }
  .wea-edc-success-box,
  .wea-edc-confirm-box,
  .wea-edc-view-tab,
  .wea-edc-edite-again {
    width: 680px !important;
  }

  .wea-edc-error-box {
    width: 700px !important;
  }

  .wea-edc-statistics {
    width: 700px !important;
  }
}

.wea-edc-pane-box{
  height: 100vh;
}

.wea-edc-container {
  .wea-edc-success-box,
  .wea-edc-error-box,
  .wea-edc-confirm-box {
    padding-top: 0px;
  }
}

.wea-edc-success-box,
.wea-edc-error-box,
.wea-edc-confirm-box{
  padding: 20px 0 0;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  position: relative;

  footer {
    line-height: 36px;
    background: #F1F1F1;
  }
}
.wea-edc-success-content {
  padding: 20px 3% 30px;
  background: #fff;
  .wea-field-readonly {
    display: block;
    width: 100%;
    text-align: center;
  }
}
.wea-edc-error-content,
.wea-edc-confirm-content {
	padding: 50px 3% 80px;
  background: #fff;
}
.wea-edc-error-content {
  .noaccess {
    &>.icon {
      color: #f5222d;
      font-size: 50px;
    }
    &>.error-msg {
      font-size: 14px;
      padding-bottom: 10px;
      color:#777;

      .wea-field-readonly {
        color: #000;
        padding-bottom: 3px;
      }
    }
  }
  .apply {
    .tip {
      font-size: 14px;
      padding-bottom: 3px;
      &>b {
        color: #0099FF;
      }
    }
    .form-name {
      padding-bottom: 10px;

      .wea-field-readonly {
        color: #000;
      }
    }
    textarea {
      resize: none;
      padding: 10px;
      font-size: 14px;
    }
    &>.btns {
      padding-top: 20px;

      &>button {
        padding: 5px 20px;
      }
      button:first-child {
        margin-right: 50px;
      }
    }
  }
  .result {
    font-size: 14px;
    color: #777;
    .icon {
      color: #71B300;
      font-size: 40px;
    }
    .wea-field-readonly {
      color: #000;
      padding-bottom: 3px;
    }
  }
}
.wea-edc-error-content .wea-field-readonly {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #777;
}
.wea-edc-confirm-buts{
  padding-top: 20px;
}
